@import 'utils';

.user-menu-list-wrapper {
  position: relative;
  .user-menu-list-positioner {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    .user-menu {
      min-width: 10rem;
      @include material-shadow(2, 0.5);
      .me {
        padding: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        background: $oc-gray-1;
        font-size: 0.85rem;
        font-weight: 500;
        color: $oc-gray-7;
        cursor: pointer;
        &:hover {
          background: $oc-gray-0;
        }
      }
      .menu-items {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        .separator {
          width: 100%;
          height: 1px;
          background: $oc-gray-2;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}
